﻿@namespace ZXingBlazor.Components

@if (UseBuiltinImageDiv)
{
    <div class="docs-galley mb-3" style="height: @Height;width:@Width; ">
        <ul id="@Options.id" class="docs-pictures clearfix">
            @{
                var i = 0;
                foreach (var item in Images)
                {
                    var alt = (Alts != null && Alts.Any() && Alts.Count > i) ? Alts[i] : (item.Split('/').Last());
                    <li><img src="@item" alt="@alt"></li>
                    i++;
                }
            }
        </ul>
    </div>
} 

<link href="/_content/ZXingBlazor/lib/viewerjs/viewer.min.css" rel="stylesheet" />

<style>
    .docs-galley {
        padding: 10px;
        width: 400px;
    }

    .docs-pictures {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .docs-pictures > li {
            border: 1px solid transparent;
            float: left;
            height: calc(100% / 3);
            margin: 0 -1px -1px 0;
            overflow: hidden;
            width: calc(100% / 3);
        }

            .docs-pictures > li > img {
                cursor: -webkit-zoom-in;
                cursor: zoom-in;
                width: 100%;
            }

    img {
        vertical-align: middle;
        border-style: none;
    }
</style>
